<template>
  <div>
    <div>
      <slot name="formSlot"></slot>
    </div>
    <!-- <div>
      <slot name="operatSlot"></slot>
    </div> -->
    <el-table
      size="mini"
      :data="saleTableData"
      style="width: 100%"
      @select="checkbox"
      @select-all="checkAll"
      ref="importTable"
    >
      <el-table-column
        v-for="(item, index) in saleHeadData"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width"
        align="center"
        header-align="center"
      >
        <template slot-scope="scope">
          <div v-if="!item.slot">
            {{ saleTableData[scope.$index][item.prop] }}
          </div>
          <div v-if="item.slot">
            <slot :name="item.prop" v-bind:row="scope.row"></slot>
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column -->
      <!-- fixed="right" -->
      <!-- v-if="isoperation" -->
      <!-- label="操作" -->
      <!-- width="140" -->
      <!-- > -->
      <!-- <template slot-scope="scope"> -->
      <!-- <slot name="operation" v-bind:row="scope.row"></slot> -->
      <!-- </template> -->
      <!-- </el-table-column> -->
      <el-table-column type="selection" width="55"> </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="submit"
        :disabled="selectionList.length == 1 ? false : true"
        >确 定</el-button
      >
    </span>
  </div>
</template>
<script>
export default {
  name: "ImportTable",
  data() {
    return {
      dialogVisible: true,
      selectionList: [],
    };
  },
  props: {
    saleTableData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    saleHeadData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    //是否展示操作
    isoperation: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 是否展示分页
    ispagination: {
      type: Boolean,
      default: () => {
        return true;
      },
    },
    // 固定表格头部
    height: {
      type: Number,
      default: () => {
        return 300;
      },
    },
    // 当前第几页
    currentpage: {
      type: Number,
      default: () => {
        return 1;
      },
    },
    // 切换一页多少条数据的选项
    pagesizes: {
      type: Array,
      default: () => {
        return [5, 10, 15, 20];
      },
    },
    // 一页几条
    pagesize: {
      type: Number,
      default: () => {
        return 10;
      },
    },
    // 总条数
    total: {
      type: Number,
      default: () => {
        return 0;
      },
    },
  },
  methods: {
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      let _self = this;
      _self.$emit("SizeChange", val);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      let _self = this;
      _self.$emit("CurrentChange", val);
    },
    submit() {
      this.$refs.importTable.clearSelection();

      this.$emit("dialogVisible", false);
      this.$emit("selectList", this.selectionList);
      console.log(this.selectionList);
      this.selectionList = [];
    },
    checkbox(selection, row) {
      this.selectionList = [];
      console.log(row);
      console.log(selection);
      this.selectionList = selection;
      if (this.selectionList.length > 1) {
        this.$message.error("请选择同一用户订单");
      }
    },
    checkAll(selection) {
      this.selectionList = [];
      console.log(selection);
    },
  },
};
</script>